<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <style>
        .card {
            padding: 10px;
            background: bisque;
        }
    </style>
    <title></title>
</head>
<body class="container-fluid"><br>

    <div id="app">
        <div  v-pin:pig.bottom.right="pan.p1"  class="card">
            <button @click = 'pan.p1 = !pan.p1'>确定/取消</button>
            第一个内容
        </div>
        <div  v-pin:dog.bottom.left="pan.p2"  class="card">
            <button @click = 'pan.p2 = !pan.p2'>确定/取消</button>
            第二个内容
        </div>

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>




    <script src="js/vue.js" ></script>
    <script>
        // 自定义指令 （参数：指令作用的元素、被指令绑定的东东）
        Vue.directive('pin',function (el, binding) {
            var val = binding.value; // 绑定的值
            var mod = binding.modifiers; // 修饰符
            var arg = binding.arg; // 参数
            if(val) {
                el.style.position = 'fixed';
                for (var key in mod) {
                    if(mod[key]) {
                        el.style[key] = '20px';
                    }
                }
                if(arg == 'pig') {
                    el.style.background = '#ccc';
                } else if (arg == 'dog') {
                    el.style.background = '#f60';
                }
            } else {
                el.style.position = 'static';
                el.style.background = 'bisque';
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {
                pan: {
                    p1: false,
                    p2: false
                }
            }
        });

    </script>
</body>
</html>
